<template>
  <!-- 顶部标题 -->
  <header class="header" style="background: #fff; border-bottom: 1px solid #ddd; padding: 16px">
    <div class="logo">
      <span>广州殡葬服务中心</span>
    </div>
  </header>
  <div class="announcement-page">
    <!-- 返回与标题 -->
    <div class="header">
      <el-link type="primary" @click="onCancel" class="back-link" icon="DArrowLeft">返回</el-link>
      <span> 首页 / 公告-综合评分类 / 公告详情</span>
    </div>
    <div class="form-container">
      <!-- PDF 渲染容器 -->
      <iframe :src="pdfUrl" frameborder="0" class="pdf-iframe"></iframe>
    </div>
    <div class="btn-box" v-if="operate">
      <el-button type="primary" @click="downloadPdf" style="width: 200px;height: 40px;">下载项目公告及附件</el-button>
      <el-button type="primary" @click="applyProject" style="width: 200px;height: 40px;">参与本项目</el-button>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { getNoticeInfo } from "@/api/projectNotice";
const baseApiUrl = import.meta.env.VITE_APP_BASE_API;
const pdfUrl = ref("");

const router = useRouter();
const route = useRoute();

const operate=ref(true)
const onCancel = () => {
  if (window.history.length > 1) {
    window.history.back(); // 返回上一页
  } else {
    router.push(`judgeProject?type=${route.query.type}`);
    window.location.reload(); // 刷新当前页面
  }
};
onMounted(() => {
  const judgeInfo = localStorage.getItem("judgeInfo");
  if (judgeInfo) {
    operate.value=false
  }
  getNoticeInfo(route.query.id).then((res) => {
    if (res.code == 200) {
      pdfUrl.value = baseApiUrl + res.data.noticeUrl;
    }
  });
});
const downloadPdf = async () => {
  try {
    const response = await fetch(pdfUrl.value, { mode: "cors" });
    const blob = await response.blob();

    // 创建 URL 对象并触发下载
    const link = document.createElement("a");
    link.href = URL.createObjectURL(blob);
    link.download = "项目公告.pdf";

    // 触发点击事件下载
    link.click();

    // 释放 URL 对象
    URL.revokeObjectURL(link.href);
  } catch (error) {
    console.error("下载图片失败", error);
    this.$message.error("下载图片失败，请稍后重试！");
  }
};
const applyProject = () => {
  if (!localStorage.getItem("token")) {
    showMessage("请先登录", "error");
    return;
  }
  let id = route.query.noticeId || route.query.id;
  router.push({
    path: "/announcementApply",
    query: {
      id: id,
      type: "apply",
    },
  });
};
</script>

<style scoped>
.header {
  display: flex;
  align-items: center;
}
.header .logo {
  display: flex;
  align-items: center;
}
.header .logo span {
  margin-left: 16px;
  font-size: 18px;
  font-weight: bold;
}
.announcement-page {
  height: calc(100% - 240px);
  padding: 16px 30px;
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  font-size: 14px;
  color: #333;
}

.back-link {
  margin-right: 8px;
}
.form-container {
  margin: 0 auto;
  background: #fff;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: 100%; /* 改为 100% */
  max-width: 1300px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%; /* 确保容器的高度填满视口 */
  position: relative; /* 需要这个来让iframe填充容器 */
  .pdf-iframe {
    width: 100%; /* 让 iframe 宽度 100% */
    height: 100%; /* 让 iframe 高度 100% */
    border: none; /* 去掉边框 */
    position: absolute; /* 确保 iframe 充满父容器 */
    top: 0;
    left: 0;
  }
}
</style>
